<style lang='scss' scoped>
.message {
    width: 100%;
    height: 99.9%;
    overflow: auto;
    font-size: 0.8rem;
    .message_box {
        padding: 0.8rem;
        .list {
            margin-bottom: 1rem;
            .time {
                text-align: center;
                text {
                    color: #000000c0;
                    background-color: #cccccc3f;
                    display: inline-block;
                    margin: auto;
                    border-radius: 0.5rem;
                    padding: 0.2rem 1rem;
                }
            }
            .content {
                margin-top: 1rem;
                background-color: #fff;
                border-radius: 0.5rem;
                .title {
                    font-family: "嘿嘿嘿 Normal";
                    font-size: 1.2rem;
                    padding: 0.8rem;
                    padding-bottom: 0;
                }
                .P {
                    padding: 0.8rem;
                }
                .footer_btn {
                    display: flex;
                    justify-content: space-between;
                    border-top: 1px solid #ccc;
                    padding: 0.8rem;
                    .text {
                        color: #666363;
                    }
                }
            }
        }
    }
}
</style>

<template>
    <view class='message'>
        <u-navbar title="系统消息"> </u-navbar>
        <view class="message_box">
            <view class="list" v-for="(item, index) in state.noticelist" :key="index">
                <view class="time">
                    <text>{{item.create_time}}</text>
                </view>
                <view class="content">
                    <view class="title">
                        {{item.title}}
                    </view>
                    <view class="P" v-html="item.big_content"></view>
                    <view class="footer_btn" @click="gopathmessage_details(item)">
                        <view class="text">
                            点击查看详情
                        </view>
                        <view>
                            <u-icon name="arrow-right"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { notice, readNotice } from "@/api/user";
const state = reactive<{
    noticelist: Array;
}>({
    noticelist: [],
});
onShow(() => {
    uni.showLoading({
        title: "加载中",
    });
    getData().finally(() => {
        uni.hideLoading();
        readNotice({ id: 0 });
    });
});
const getData = async () => {
    const noticelist = await notice();
    state.noticelist = noticelist;
};
//跳转到消息详情
const gopathmessage_details = (item) => {
    uni.setStorageSync("message_details", item);
    uni.navigateTo({
        url: "/pages/message/message_details",
    });
};
</script>